<template>
  <div class="module-basic-department">
    <el-row style="height:100%;">
      <el-col style="height:100%;">
        <table-panel :name="'系信息'" :columns="departmentColumns" :tableData="departmentData" :showRowNumber="true" :multiSelection="true"
        :usePagination="false"
        :canCreate="authorities.create" :canEdit="authorities.edit" :canDelete="authorities.delete"
        :currentPage="departmentCurrentPage" :totalNum="departmentTotalNum" @page-change="onPageChange('department',$event)" :pageSize="pageSize"
        @table-searching="onSearching('department',$event)"
        @table-create="onCreate('department',$event)" @table-edit="onEdit('department', $event)"
        @table-delete="onDelete('department',$event)" @table-export="onExport('department',$event)"
        @selection-change="onSelectionChange('department',$event)"></table-panel>
      </el-col>
    </el-row>
    <el-dialog title="系信息" width="20%" :visible.sync="departmentDlgVisible">
      <el-form ref="departmentForm" :model="departmentRecord" :rules="departmentRules"
      label-position="right" label-width="90px" size="mini" status-icon>
        <el-form-item label="所属学院" prop="xybh">
          <el-select v-model="departmentRecord.xybh" placeholder="请选择学院" filterable>
            <template v-for="item in facultyData">
              <el-option :key="item.xybh" :label="item.xymc" :value="item.xybh">
                <span style="float: left">{{ item.xymc }}</span>
                <span style="float: right; font-size: 13px; margin-left:5px;">{{ item.xybhzdy }}</span>
              </el-option>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="系编号" prop="xbhzdy">
          <el-input v-model="departmentRecord.xbhzdy"></el-input>
        </el-form-item>
        <el-form-item label="系名称" prop="xmc">
          <el-input v-model="departmentRecord.xmc"></el-input>
        </el-form-item>
        <el-form-item label="系电话" prop="xdh">
          <el-input v-model="departmentRecord.xdh"></el-input>
        </el-form-item>
        <el-form-item label="系备注" prop="xbz">
          <el-input type="textarea" v-model="departmentRecord.xbz"></el-input>
        </el-form-item>
        <el-checkbox v-model="departmentRecord.sfqy" label="是否启用" true-label="1" false-label="0" >
        </el-checkbox>
        <el-row>
          <el-button @click="onConfirm('department', $event)" type="primary" size="mini">确定</el-button>
          <el-button @click="departmentDlgVisible=false" size="mini">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog> 
  </div>
</template>
<script>
import TablePanel from "@/components/basic/TablePanel";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";
import { trueFalseRenderer } from "@/utils/tableutils.js";

//meta info
var department = "department"; // 表格名称
var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证
var curPageAttr = "CurrentPage";// 分页-当前页
var totalNumAttr = "TotalNum";// 分页-总数
var qParamAttr = "QueryParams";// 查询参数

// 系信息-列
var departmentColumns = [
  {
    prop: "xbh",
    label: "系编号",
    outOfSearch:true,
    hidden: true
  },
  {
    prop:"xybh",
    label:"所属学院编号",
    outOfSearch:true,
    hidden: true,
    rules: [{
      required: true,
      trigger: "blur"
    }]
  },
  {
    prop: "xbhzdy",
    label: "系编号",
    rules:[{
      required: true,
      max: 10, 
      message: "必填，不超过10个字符",
      trigger: "blur"
    }]
  },
  {
    prop: "xmc",
    label: "系名称",
    rules: [{
      required: true,
      max: 50, 
      message:"必填，不超过50个字符",
      trigger: "blur"
    }]
  }, 
  {
    prop:"xybhzdy",
    label:"所属学院编号"
  },
  {
    prop:"xymc",
    label:"所属学院"
  },
  {
    prop: "xdh",
    label: "系电话",
    rules:[{
      required: true,
      message: "请输入有效的电话号码",
      pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
      trigger: "blur"
    }]
  },
  {
    prop: "xbz",
    label: "系备注",
    rules: [{ 
      max: 50, 
      message: "不超过50个字符", 
      trigger: 'blur' 
    }]
  },
  {
    prop: "sfqy",
    label: "是否启用",
    type: "Boolean",
    width: 80,
    outOfSearch: true,
    align: "center",
    headerAlign: "center",
    renderer: trueFalseRenderer
  }
];

export default {
  name: "Department",
  components: {
    "table-panel": TablePanel
  },
  methods: {
    onSearching: function(tname, params) {//查询
      var me = this;
      let url = "/jcXxxb";// /static/data/department.json

      if(url !== "") {
        me[tname+qParamAttr] = {};
        me[tname+qParamAttr] = params;
        if (params.isAccurate) {
          me[tname+qParamAttr] = params.paramPairs;
        } else {
          me[tname+qParamAttr].keywords = params.query;
        }
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data;
              // me[tname+totalNumAttr] = resp.data.total;
            }
        });
      }
    },
    onCreate: function(tname) {//创建
      var me = this;
      me[tname + recordAttr] = formModelInitFromTable(me[tname + columnsAttr]);
      me[tname + recordAttr].sfqy = "1"; // 创建时，有效否是选中的

      me[tname + dlgVisibleAttr] = true;

    },
    onEdit: function(tname, row) { // 编辑
      var me = this;
      me[tname + recordAttr] = row;
      me[tname + dlgVisibleAttr] = true;
    },
    onDelete: function(tname, row) {// 删除
      var me = this;
      me.$confirm("确定删除这条记录吗?", "提示", {
          type: "warning"
        }).then(() => {
          me.deleteRequest(`/jcXxxb/${row.xbh}`).then((resp)=>{
            if(resp.status == 200) {
              me.$message.success("删除成功!");
              me.onSearching(department,{});// 重新加载表格数据
            }else{
              me.$message.error('删除失败！');
            }
          });
        }).catch(() => {});
    },
    onExport: function(tname, params) {// 导出
      var me = this;
      me.$message({
        type: "info",
        message: "发送导出请求，返回下载路径"
      });
    },
    onSelectionChange: function(tname, data) {// 选中改变
      var me = this;
      // 缓存记录，按照角色编号，查询对应的选中权限节点数组
      me[tname + selectionAttr] = data;
    },
    onConfirm: function(tname) {// 对话框-确认
      var me = this;
      // 验证信息
      var ret;
      me.$refs[tname + formAttr].validate((result, what) => {
        ret = result;
      });
      if (!ret) {
        me.$message.error("表单信息有误");
        return;
      }
      // 发送请求 /static/data/testSuc.json
      me.postRequest("/jcXxxb",me[department+recordAttr]).then(resp => {
        if (resp.status == 200) {
          me.$message.success("提交成功！");
          //最后，隐藏对话框
          me[tname + dlgVisibleAttr] = false;
          me.onSearching(department, {});// 重新查一遍
        } else {
          me.$message.error("服务器发生错误，代码：" + resp.status);
        }
      });
    },
    onPageChange:function(tname,page){// 分页改变
      var me = this;
      let url = "/jcXxxb";

      if(url !== ""){
        me[tname+curPageAttr] = page;
        me[tname+qParamAttr]["page"] = page;
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data;
              // me[tname+totalNumAttr] = resp.data.total;
            }
        });
      }

    }
  },
  data() {
    return {
      authorities:{
        create:true,
        delete:true,
        edit:true,
        search:true
      },// 权限控制
      [department + columnsAttr]: departmentColumns, // 表格-列
      [department + dataAttr]: [], // 表格的数据
      [department + selectionAttr]: [], // 当前选中
      [department + dlgVisibleAttr]: false, // 对话框是否可见
      [department + recordAttr]: {}, // 表单模型
      [department + rulesAttr]: {}, // 表单验证
      [department + curPageAttr]:1,// 当前页
      [department + totalNumAttr]:0,// 总数
      [department + qParamAttr]:{},// 查询参数
      pageSize:20,// 每页数量
      facultyData:[]
    };
  },
  created: function() {
    let me = this;
    // 添加权限控制
    // me.authorities = me.$route.meta.authorities;

    // 表单模型初始化
    me[department+recordAttr] = formModelInitFromTable(me[department+columnsAttr]);
    // 表单验证初始化
    me[department+rulesAttr] = formRulesInitFromTable(me[department+columnsAttr]);

    // 加载学院数据
    me.getRequest("/jcXyxxb",{}).then(resp=>{
      if(resp.status == 200) {
        me.facultyData = resp.data;
      }
    });
  }
};
</script>
<style lang="scss">
.module-basic-department {
  height: 100%;
}
</style>


